Reusable UI Components are standardized interface elements created once and reused throughout a Figma design. They help designers maintain consistency, reduce repetitive work, simplify updates, and build scalable design systems for websites and mobile applications.
For professional Figma learning, explore JustAcademy Figma Training and Register for Figma Course Demo.
A reusable UI component is a design element that can be created once and used multiple times across different screens or pages. Examples include buttons, input fields, navigation bars, cards, checkboxes, radio buttons, modals, headers, footers, and profile sections.
Instead of designing the same element repeatedly, designers create a master component and place instances of that component wherever it is required.
Component
↓
Create Once
↓
Reuse Multiple Times
↓
Maintain Consistency
↓
Update Centrally
| Component | Common Usage |
|---|---|
| Button | Login, Submit, Save, Continue, Buy Now |
| Input Field | Forms, Search, Registration |
| Card | Products, Articles, Profiles |
| Navbar | Website and application navigation |
| Modal | Confirmation, alerts, dialogs |
| Checkbox | Multiple selections and preferences |
| Radio Button | Single-choice selections |
| Dropdown | Selection menus |
| Avatar | User profiles and account sections |
| Badge | Status and category indicators |
In Figma, a component acts as the reusable source, while an instance is a reusable copy placed in a design.
| Component | Instance |
|---|---|
| Reusable source element | Reusable copy of the component |
| Used to define the design | Used in actual screens |
| Changes can control instances | Can inherit changes from the main component |
| Usually maintained in a component library | Placed throughout product designs |
A reusable component can begin with a simple element such as a button.
Button
├── Label
├── Padding
├── Background
├── Border Radius
└── Interaction
Buttons are among the most commonly reused UI components. A good button component should support different states, sizes, labels, and usage contexts.
Instead of creating separate components for every button variation, designers can organize related variations into a component set.
Button
├── Type = Primary
├── Type = Secondary
├── Type = Tertiary
├── State = Default
├── State = Hover
├── State = Pressed
├── State = Disabled
└── Size = Small / Medium / Large
Input fields should be designed as reusable components because forms often contain many similar fields.
Cards are commonly used for products, blog posts, services, courses, profiles, and dashboard information.
Product Card
├── Image
├── Category
├── Product Name
├── Description
├── Price
├── Rating
└── Action Button
A reusable card component allows designers to maintain the same layout while changing the content for different items.
Navigation components help maintain consistency across multiple pages.
Auto Layout makes reusable components more flexible. For example, a button can automatically adjust its width when the label changes.
Button Frame
↓
Auto Layout
↓
Horizontal Padding
↓
Text Label
↓
Button Automatically Resizes
Auto Layout is particularly useful for buttons, cards, navigation items, lists, form fields, and responsive interface elements.
Component properties allow designers to expose important customization options without creating unnecessary duplicate components.
Boolean properties can control whether an element is visible or hidden.
For example, a button component can have an optional leading icon.
Button
Show Icon = True
Show Icon = False
This allows one component to support both versions without creating separate components.
Text properties allow users to change component text while keeping the component structure consistent.
Button Label = "Submit"
Button Label = "Continue"
Button Label = "Get Started"
This is useful for reusable buttons, labels, cards, headings, and other text-based components.
Instance swap properties allow a nested component to be replaced with another compatible component.
For example, a navigation component may allow the user to change an icon without breaking the overall structure.
Navigation Item
├── Icon → Swap Icon
└── Label → Change Text
Variants group related versions of a component together. They are useful when a component has different states, sizes, or visual styles.
| Property | Example Values |
|---|---|
| Size | Small, Medium, Large |
| State | Default, Hover, Pressed, Disabled |
| Type | Primary, Secondary, Tertiary |
| Theme | Light, Dark |
Consistent naming is essential for finding components quickly.
Category / Component / Variant / State
Button / Primary / Medium / Default
Button / Primary / Medium / Disabled
Input / Text / Default
Input / Text / Error
Card / Product / Featured
A large Figma project can contain hundreds of components. Proper organization makes the component library easier to use.
Components
├── Buttons
├── Forms
├── Navigation
├── Cards
├── Modals
├── Tables
├── Feedback
├── Icons
└── Data Display
A component library is a centralized collection of reusable components that can be shared across files and projects. It can contain buttons, forms, typography styles, icons, cards, navigation elements, and other standardized UI patterns.
Libraries are especially useful for large teams and products containing multiple screens or applications.
Reusable components are an important building block of a design system. A mature design system can combine design tokens, typography, colors, spacing, components, patterns, documentation, and usage guidelines.
Design System
├── Foundations
│ ├── Colors
│ ├── Typography
│ ├── Spacing
│ └── Icons
├── Components
│ ├── Buttons
│ ├── Inputs
│ ├── Cards
│ └── Navigation
└── Patterns
├── Forms
├── Dashboards
└── Checkout
Design tokens define reusable values such as colors, spacing, typography, border radius, and shadows. Components can use these values to maintain consistency throughout a design.
| Token Type | Example |
|---|---|
| Color | Primary, Success, Error |
| Spacing | 4px, 8px, 16px, 24px |
| Radius | 4px, 8px, 12px |
| Typography | Heading, Body, Caption |
| Shadow | Small, Medium, Large |
Reusable components should work across different screen sizes. Components should be designed with flexible widths, Auto Layout, appropriate constraints, and responsive behavior.
Desktop
↓
Tablet
↓
Mobile
↓
Same Component
↓
Responsive Behavior
Mobile applications commonly use reusable components such as app bars, bottom navigation, cards, buttons, input fields, lists, dialogs, tabs, and profile components.
Creating these components once helps designers maintain a consistent mobile experience across multiple screens.
Website design systems commonly contain reusable headers, navigation bars, hero sections, cards, forms, buttons, footers, alerts, modals, and content sections.
Components can contain other components. For example, a product card can contain an image component, badge component, rating component, and button component.
Product Card
├── Product Image
├── Badge Component
├── Rating Component
├── Price
└── Button Component
Nested components make complex interfaces easier to maintain and update.
Instances can often have customized content while still remaining connected to their main component. Designers should use overrides carefully and avoid changing the structure unnecessarily.
Detaching an instance separates it from its component relationship. This should be used carefully because future updates from the main component may no longer apply to the detached element.
Before detaching a component, consider whether a variant, property, or controlled override can solve the requirement instead.
Forms benefit greatly from reusable components because fields often share the same structure.
Form Field
├── Label
├── Input
├── Helper Text
└── Error Message
The same component can then be reused for name, email, phone, password, address, and other fields.
Dashboard interfaces frequently use cards, tables, charts, filters, tabs, dropdowns, status badges, and navigation components.
Dashboard
├── Sidebar
├── Header
├── Statistic Cards
├── Chart
├── Filter
├── Data Table
└── Pagination
E-commerce projects can use reusable product cards, pricing blocks, cart items, quantity selectors, filters, review components, checkout fields, and order summaries.
E-Commerce System
├── Product Card
├── Product Image
├── Price
├── Rating
├── Add to Cart Button
├── Cart Item
└── Checkout Form
Reusable components can also be used in interactive prototypes. Buttons, menus, tabs, dialogs, navigation items, and form elements can be designed as components and connected to prototype interactions.
Interactive components should represent important user states.
| Component | Possible States |
|---|---|
| Button | Default, Hover, Pressed, Disabled |
| Input | Default, Focused, Error, Disabled |
| Checkbox | Unchecked, Checked, Disabled |
| Toggle | On, Off, Disabled |
| Navigation | Default, Active, Disabled |
Reusable components should support accessibility from the beginning. Consistent components make it easier to apply accessibility standards across the entire product.
Well-organized reusable components make developer handoff easier because developers can identify consistent patterns and understand which UI elements should be reused.
Component names, variants, states, spacing, typography, and behavior should be documented clearly.
Good documentation explains how and when a component should be used.
| Documentation Area | Information |
|---|---|
| Name | Component name |
| Purpose | What the component is used for |
| Variants | Available styles and states |
| Properties | Available customization options |
| Usage | When to use the component |
| Restrictions | When not to use it |
Suppose a website needs buttons on the Login, Signup, Checkout, and Profile pages.
Button Component
├── Primary
│ ├── Default
│ ├── Hover
│ ├── Pressed
│ └── Disabled
└── Secondary
├── Default
├── Hover
├── Pressed
└── Disabled
Consider an e-commerce application with 100 products. Instead of creating every product card separately, create one reusable product card component.
Product Card
Image → Product Image
Title → Product Name
Price → Product Price
Rating → Product Rating
Button → Add to Cart
Each product can then use an instance with different content.
A login screen can contain reusable email and password field components along with a reusable button.
Login Form
├── Email Input Component
├── Password Input Component
├── Remember Me Component
└── Login Button Component
The same fields can be reused on signup, account settings, checkout, and other screens.
Identify Repeated UI
↓
Create Base Component
↓
Apply Auto Layout
↓
Define Properties
↓
Create Variants
↓
Name Clearly
↓
Add to Component Library
↓
Use Instances
↓
Test in Real Screens
↓
Document and Maintain
Shared components help multiple designers work with the same visual language. Instead of creating their own versions of common elements, designers can use standardized components from the shared library.
This reduces visual inconsistencies and makes large design projects easier to maintain.
A reusable UI component is a standardized design element that can be used multiple times across screens while maintaining a consistent structure and appearance.
A component is the reusable source element, while an instance is a reusable copy placed in a design.
Auto Layout allows components to adapt to changing content, spacing, and dimensions while maintaining their layout structure.
Variants group related versions of a component, such as different sizes, states, or styles.
Component properties expose controlled customization options such as text, visibility, instance swaps, and variants.
Component libraries provide centralized reusable UI resources that improve consistency, collaboration, and maintenance.
Duplicate components increase maintenance effort and can create inconsistent UI patterns across the product.
Reusable UI Components are one of the most important concepts for creating scalable and consistent interfaces in Figma. By combining components, instances, Auto Layout, variants, component properties, and libraries, designers can build flexible UI systems that are easier to maintain and reuse.
A well-designed component system reduces repetitive work, improves collaboration, supports responsive design, strengthens design consistency, and makes developer handoff more efficient. For professional learning, explore JustAcademy Figma Training and Register for Figma Course Demo.
